<template>
  <div class="qr-code-display">
    <div v-if="qrCodeUrl" class="qr-container">
      <div class="qr-header">
        <h4>登录二维码</h4>
        <el-button size="small" @click="refreshQrCode">刷新</el-button>
      </div>

      <div class="qr-content">
        <canvas ref="qrCanvas" class="qr-canvas"></canvas>
        <p class="qr-tip">请使用币安App扫描二维码登录</p>

        <div class="qr-info">
          <div class="info-item">
            <span class="label">二维码链接:</span>
            <span class="value">{{ qrCodeUrl }}</span>
          </div>
          <div class="info-item" v-if="originalQrCode">
            <span class="label">原始码:</span>
            <span class="value">{{ originalQrCode }}</span>
          </div>
          <div class="info-item" v-if="capturedAt">
            <span class="label">生成时间:</span>
            <span class="value">{{ formatTime(capturedAt) }}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="qr-placeholder">
      <el-empty description="暂无二维码数据">
        <el-button type="primary" @click="$emit('request-qr')">获取二维码</el-button>
      </el-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, onMounted } from 'vue'

// Props
const props = defineProps({
  qrCodeUrl: {
    type: String,
    default: ''
  },
  originalQrCode: {
    type: String,
    default: ''
  },
  capturedAt: {
    type: [String, Number, Date],
    default: null
  }
})

// Emits
const emit = defineEmits(['request-qr', 'refresh'])

// Refs
const qrCanvas = ref(null)
const QRCode = ref(null)

// 动态加载QRCode模块
const loadQRCode = async () => {
  try {
    const module = await import('qrcode')
    QRCode.value = module.default || module
  } catch (error) {
    console.warn('QRCode module not available:', error)
  }
}

// 监听qrCodeUrl变化，自动生成二维码
watch(() => props.qrCodeUrl, async (newUrl) => {
  if (newUrl && qrCanvas.value && QRCode.value) {
    await generateQrCode(newUrl)
  }
}, { immediate: true })

// 生成二维码
const generateQrCode = async (url) => {
  if (!url || !qrCanvas.value || !QRCode.value) return

  try {
    await QRCode.value.toCanvas(qrCanvas.value, url, {
      width: 200,
      height: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })
  } catch (error) {
    console.error('生成二维码失败:', error)
  }
}

// 刷新二维码
const refreshQrCode = () => {
  emit('refresh')
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return '-'
  return new Date(time).toLocaleString()
}

// 组件挂载后加载模块并生成二维码
onMounted(async () => {
  await loadQRCode()
  if (props.qrCodeUrl && QRCode.value) {
    await nextTick()
    await generateQrCode(props.qrCodeUrl)
  }
})
</script>

<style lang="scss" scoped>
.qr-code-display {
  .qr-container {
    .qr-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h4 {
        margin: 0;
        color: #303133;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .qr-content {
      text-align: center;

      .qr-canvas {
        display: block;
        margin: 0 auto 16px;
        border: 1px solid #dcdfe6;
        border-radius: 8px;
        background: #fff;
      }

      .qr-tip {
        margin: 0 0 20px;
        color: #909399;
        font-size: 14px;
      }

      .qr-info {
        text-align: left;
        background: #f8f9fa;
        border-radius: 6px;
        padding: 12px;

        .info-item {
          display: flex;
          margin-bottom: 8px;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            min-width: 80px;
            color: #606266;
            font-size: 12px;
          }

          .value {
            flex: 1;
            color: #303133;
            font-size: 12px;
            word-break: break-all;
            font-family: monospace;
          }
        }
      }
    }
  }

  .qr-placeholder {
    text-align: center;
    padding: 40px 20px;
  }
}
</style>